<template>
  <el-dialog
    :before-close="handleClose"
    :title="title === 'add' ? '新增' : '编辑'"
    :visible.sync="dialogVisible"
    width="700px"
  >
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      label-width="120px"
    >
      <el-form-item label="礼物名称" prop="gift_name">
        <el-input
          v-model="ruleForm.gift_name"
          placeholder="请输入礼物名称"
          style="width: 80%;"
        ></el-input>
      </el-form-item>
      <el-form-item label="升级数量" prop="upgrade_count">
        <el-input
          v-model="ruleForm.upgrade_count"
          placeholder="请输入升级数量"
          style="width: 80%;"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物类别">
        <el-select v-model="ruleForm.category_id" placeholder="请选择类别">
          <el-option
            v-for="item in categoryOption"
            :key="'类别' + item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="礼物价格" prop="gift_price">
        <el-input
          v-model.number="ruleForm.gift_price"
          placeholder="请输入礼物价格"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物图片" prop="picture">
        <el-upload
          :http-request="customizeUpload"
          :on-success="handleSuccessPicture"
          :show-file-list="false"
          action=""
          class="avatar-uploader"
        >
          <img v-if="ruleForm.picture" :src="ruleForm.picture" class="avatar"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="礼物动效">
        <el-upload
          :http-request="customizeUpload"
          :on-success="handleSuccessSpecial"
          :show-file-list="false"
          action=""
          class="avatar-uploader"
        >
          <img v-if="ruleForm.special" :src="ruleForm.special" class="avatar"/>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button
          v-if="ruleForm.special"
          type="danger"
          @click="handleDeleteSpecial"
        >删除
        </el-button
        >
      </el-form-item>
      <el-form-item label="上下架状态" prop="sale_status">
        <el-radio v-model="ruleForm.sale_status" :label="1">上架</el-radio>
        <el-radio v-model="ruleForm.sale_status" :label="0">下架</el-radio>
      </el-form-item>
      <el-form-item label="礼物心动值" prop="gift_cardiac">
        <el-input
          v-model.number="ruleForm.gift_cardiac"
          placeholder="请输入礼物心动值(可为负数)"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物PK值" prop="pk_score">
        <el-input
          v-model.number="ruleForm.pk_score"
          placeholder="请输入礼物PK值"
          style="width: 80%;"
          type="number"
        ></el-input>
      </el-form-item>
      <el-form-item label="全服广播配置" prop="broadcast_id">
        <el-select
          v-model="ruleForm.broadcast_id"
          class="filter-item"
          clearable
          filterable
          placeholder="请选择全服广播配置"
          style="width: 280px"
        >
          <el-option
            v-for="item in broadcastIdList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="礼物说明">
        <el-input
          v-model="ruleForm.gift_desc"
          :rows="3"
          placeholder="最多15个字"
          style="width: 80%;"
          type="textarea"
        ></el-input>
      </el-form-item>
      <el-form-item label="类别" prop="gift_type">
        <el-select
          v-model="ruleForm.gift_type"
          class="filter-item"
          filterable
          placeholder="请选择类别"
          style="width: 280px"
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="链接">
        <!-- <el-radio v-model="gift_url" :label="">h5链接</el-radio>
        <el-radio v-model="gift_url" :label="">无链接</el-radio> -->
        <el-input
          v-model="ruleForm.gift_url"
          placeholder="请输入链接"
          style="width:80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="礼物标签">
        <el-select
          v-model="tags_selected_list"
          multiple
          placeholder="请选择标签"
          @change="handleChange"
        >
          <el-option
            v-for="item in tagsOption"
            :key="'标签' + item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="礼物尺寸" prop="gift_size">
        <el-radio v-model="ruleForm.gift_size" :label="1">小</el-radio>
        <el-radio v-model="ruleForm.gift_size" :label="2">中</el-radio>
        <el-radio v-model="ruleForm.gift_size" :label="3">大</el-radio>
      </el-form-item>
      <el-form-item label="礼物排序" prop="sort">
        <el-input
          v-model.number="ruleForm.sort"
          placeholder="请输入排序"
          style="width: 80%;"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="展示礼物墙" prop="is_show_in_wall">
        <el-radio v-model="ruleForm.is_show_in_wall" :label="1">是</el-radio>
        <el-radio v-model="ruleForm.is_show_in_wall" :label="0">否</el-radio>
      </el-form-item>
      <el-form-item
        :prop="ruleForm.is_show_in_wall ? 'wall_status' : ''"
        label="礼物墙状态"
      >
        <el-input
          v-model="ruleForm.wall_status"
          placeholder="请输入礼物墙状态"
          style="width: 80%;"
        >
        </el-input>
      </el-form-item>
      <el-form-item
        :prop="ruleForm.is_show_in_wall ? 'wall_desc' : ''"
        label="礼物墙说明"
      >
        <el-input
          v-model="ruleForm.wall_desc"
          placeholder="请输入礼物墙说明"
          style="width:80%"
        >
        </el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <!-- :loading="submitLoading" -->
      <el-button type="primary" @click="handleSubmit('ruleForm')"
      >提交</el-button
      >
    </span>
  </el-dialog>
</template>

<script>
import {
  broadcastsDropDownList,
  getCateData,
  getDataDetail,
  getTagData,
  postData,
  putData,
  typeList
} from '@/api/roomGift/giftList'

export default {
  name: '',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: 'add'
    },
    id: {
      type: Number
    },
    higherId: {
      type: Number
    }
  },
  data() {
    return {
      /**图片上传 */



      /**礼物类别 */
      categoryOption: [],
      /**礼物标签 */
      tagsOption: [],
      /**选择的礼物标签 */
      tags_selected_list: [],
      /**礼物类别 */
      typeList: [],
      // 全服广播
      broadcastIdList: [],
      ruleForm: {
        id: undefined,
        category_id: 0,
        gift_name: undefined,
        gift_price: undefined,
        picture: undefined,
        special: undefined,
        gift_cardiac: undefined,
        sort: undefined,
        sale_status: undefined,
        gift_desc: undefined,
        gift_url: undefined,
        gift_size: undefined,
        is_show_in_wall: undefined,
        wall_status: undefined,
        wall_desc: undefined,
        gift_tag_ids: undefined,
        gift_type: undefined,
        pk_score: undefined,
        broadcast_id: undefined,
        upgrade_count: undefined
      },
      rules: {
        upgrade_count: {
          required: true,
          message: '请输入升级数量',
          trigger: 'blur'
        },
        category_id: {
          required: true,
          message: '请选择礼物类别',
          trigger: 'change'
        },
        gift_name: {
          required: true,
          message: '请输入礼物名称',
          trigger: 'blur'
        },
        gift_price: {
          required: true,
          message: '请输入礼物价格',
          trigger: 'blur'
        },
        picture: {
          required: true,
          message: '请上传礼物图片',
          trigger: 'change'
        },
        special: {
          required: true,
          message: '请上传礼物动效',
          trigger: 'change'
        },
        gift_cardiac: {
          required: true,
          message: '请输入礼物心动值',
          trigger: 'blur'
        },
        gift_type: {
          required: true,
          message: '请选择礼物类别',
          trigger: 'change'
        },
        sort: { required: true, message: '请输入礼物排序', trigger: 'blur' },
        sale_status: {
          required: true,
          message: '请选择上下架状态',
          trigger: 'change'
        },
        gift_desc: {
          required: true,
          message: '请输入礼物说明',
          trigger: 'blur'
        },
        gift_size: {
          required: true,
          message: '请选择礼物尺寸',
          trigger: 'change'
        },
        is_show_in_wall: {
          required: true,
          message: '请选择是否在礼物墙展示',
          trigger: 'change'
        },
        wall_status: {
          required: true,
          message: '请输入礼物墙状态',
          trigger: 'blur'
        },
        wall_desc: {
          required: true,
          message: '请输入礼物墙说明',
          trigger: 'blur'
        },
        gift_tag_ids: {
          required: true,
          message: '请选择礼物标签',
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    tags_selected_list: function(newValue, oldValue) {
      this.ruleForm.gift_tag_ids = newValue.join(',')
    },
    title: async function(newValue, oldValue) {
      if (newValue === 'edit') {
        const detail = await getDataDetail(this.id)

        this.ruleForm.id = this.id
        this.ruleForm.category_id = detail.data.category_id
        this.ruleForm.gift_name = detail.data.name
        this.ruleForm.gift_price = detail.data.price
        this.ruleForm.picture = detail.data.picture
        this.ruleForm.special = detail.data.special
        this.ruleForm.gift_cardiac = detail.data.cardiac
        this.ruleForm.sort = detail.data.sort
        this.ruleForm.sale_status = detail.data.sold
        this.ruleForm.gift_desc = detail.data.desc
        this.ruleForm.gift_url = detail.data.url
        this.ruleForm.gift_size = detail.data.size
        this.ruleForm.is_show_in_wall = detail.data.is_show_in_wall
        this.ruleForm.wall_status = detail.data.wall_status
        this.ruleForm.wall_desc = detail.data.get_method_desc
        this.ruleForm.gift_tag_ids = detail.data.tag_ids
        this.ruleForm.gift_type = detail.data.type
        this.ruleForm.pk_score = detail.data.pk_score
        this.ruleForm.broadcast_id = detail.data.broadcast_id
        this.ruleForm.upgrade_count = detail.data.upgrade_count
      }
    }
  },
  created() {
    this.handleGetCate()
    this.handleGetTag()
    this.getTypeList()
    this.getBroadcastsDropDownList()
  },

  methods: {
    /**获取礼物分类 */
    handleGetCate() {
      getCateData().then(res => {
        let arr = [{ id: 0, title: '无类别' }]
        this.categoryOption = [...arr, ...res.data]
      })
    },
    /**获取礼物标签 */
    handleGetTag() {
      getTagData().then(res => {
        this.tagsOption = res.data
      })
    },

    /**礼物图片上传 */
    handleSuccessPicture() {
      this.ruleForm.picture = this.ossLastImgUrl
    },
    /**礼物动效上传 */
    handleSuccessSpecial() {
      this.ruleForm.special = this.ossLastImgUrl
    },
    handleDeleteSpecial() {
      this.ruleForm.special = ''
    },

    /**礼物标签最多选择两个 */
    handleChange(value) {
      if (value.length > 2) {
        this.tags_selected_list = value.slice(0, 2)
      }
    },

    /** 获取礼物类别 */
    getTypeList() {
      typeList().then(res => {
        this.typeList = res.data
      })
    },

    handleSubmit(formName) {
      let obj = {}
      for (let key in this.ruleForm) {
        if (key === 'gift_tag_ids') {
          obj[key] = this.tags_selected_list.join(',')
        } else {
          obj[key] = this.ruleForm[key]
        }
      }

      obj.higher_id = this.higherId

      this.$refs[formName].validate(async valid => {
        if (valid) {
          let data
          if (this.title === 'add') {
            data = await postData(obj)
          } else {
            data = await putData(obj)
          }
          if (data.code === 200) {
            this.$notify({
              type: 'success',
              message: '操作成功',
              position: 'bottom-right',
              showClose: false,
              duration: 3000
            })

            this.$emit('update:title', 'add')
            this.$emit('update:dialogVisible', false)
            this.$emit('updateTable')
            this.handleClose()
          }
        } else {
          return false
        }
      })
    },

    handleClose() {
      this.ruleForm = {
        id: undefined,
        category_id: 0,
        gift_name: undefined,
        gift_price: undefined,
        picture: undefined,
        special: undefined,
        gift_cardiac: undefined,
        sort: undefined,
        sale_status: undefined,
        gift_desc: undefined,
        gift_url: undefined,
        gift_size: undefined,
        is_show_in_wall: undefined,
        wall_status: undefined,
        wall_desc: undefined,
        gift_tag_ids: undefined,
        gift_type: undefined,
        pk_score: undefined,
        broadcast_id: undefined,
        upgrade_count: undefined
      }

      this.$refs.ruleForm.resetFields()

      this.$emit('update:title', 'add')
      this.$emit('update:dialogVisible', false)
    },
    getBroadcastsDropDownList() {
      broadcastsDropDownList().then(res => {
        if (res.code === 200) {
          let arr = [{
            id: 0, name: '请选择全服广播配置'
          }]
          this.broadcastIdList = [...arr, ...res.data]
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep.avatar-uploader .el-upload {
  border        : 1px dashed #d9d9d9;
  border-radius : 6px;
  cursor        : pointer;
  position      : relative;
  overflow      : hidden;
}

.avatar-uploader .el-upload:hover {
  border-color : #409eff;
}

.avatar-uploader-icon {
  font-size   : 28px;
  color       : #8c939d;
  width       : 100px;
  height      : 100px;
  line-height : 100px;
  text-align  : center;
}

.avatar {
  width   : 100px;
  height  : 100px;
  display : block;
}

::v-deep .lu-input {
  width : 300px !important;
}
</style>
